import React, { Component } from 'react'
import './index.css'
import { RightOutlined } from '@ant-design/icons';
import { Row, Col, Image } from 'antd';

export default class Recommend extends Component {
  render () {
    return (
      <div id="recommend">
        <p className="title">{this.props.title}<RightOutlined /></p>
        <Row className="RowContent" gutter={50}>
          {this.props.RecommendList.map(resources => (
            <Col key={resources.creativeId} span={8}>
              <Image style={{ borderRadius: '0.2rem' }} src={resources.uiElement.image.imageUrl} preview={false} />
              <p className="songTitle">{resources.uiElement.mainTitle.title}</p>
            </Col>
          ))}
        </Row>
      </div>
    )
  }
}
